<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">报警事故记录(前后10s)</h4>
</div>

<div class="modal-body">

    <div id="SOC" style="width: 800px;height:300px;">

    </div>

    <div id="voltage" style="width: 800px;height:300px;">

    </div>

    <div id="electricity" style="width: 800px;height:300px;">

    </div>

    <div id="temperature" style="width: 800px;height:300px;">

    </div>

    <div style="display: flex;">
        <label style="margin-left: 10px">选择模组</label>
        <select style="margin-left: 5px">
            <option value="1">1#电池模组</option>
            <option value="2">2#电池模组</option>
            <option value="3">3#电池模组</option>
            <option value="4">4#电池模组</option>
            <option value="5">5#电池模组</option>
            <option value="6">6#电池模组</option>
            <option value="7">7#电池模组</option>
            <option value="8">8#电池模组</option>
            <option value="9">9#电池模组</option>
            <option value="10">10#电池模组</option>
        </select>
        <label style="margin-left: 10px;font-size: larger">模组单体电压</label>

    </div>
    <div id="module" style="width: 800px;height:300px;">

    </div>
</div>

<script>

    $(function () {
        var dataX = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日',
            '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日',
            '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'];

        var dataY = [2, 13, 20, 23, 19, 3, 2, 12, 23, 20, 13, 9, 3, 22, 12, 3, 10, 23, 29, 13, 12,
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

        var soc = echarts.init(document.getElementById('SOC'));
        //SOC
        var optionSoc = {
            title: {
                text: 'SOC'
            },
            xAxis: {
                type: 'category',
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataY,
                type: 'line',
                smooth: true
            }]
        };
        soc.setOption(optionSoc);

        //总电压
        var voltage = echarts.init(document.getElementById('voltage'));
        var optionVoltage = {
            title: {
                text: '总电压'
            },
            xAxis: {
                type: 'category',
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataY,
                type: 'line',
                smooth: true
            }]
        };
        voltage.setOption(optionVoltage);

        //电流
        var electricity = echarts.init(document.getElementById('electricity'));
        var optionElectricity = {
            title: {
                text: '电流'
            },
            xAxis: {
                type: 'category',
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataY,
                type: 'line',
                smooth: true
            }]
        };
        electricity.setOption(optionElectricity);

        //温度
        var temperature = echarts.init(document.getElementById('temperature'));
        var optionTemperature = {
            title: {
                text: '温度'
            },
            xAxis: {
                type: 'category',
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataY,
                type: 'line',
                smooth: true
            }]
        };
        temperature.setOption(optionTemperature);

        //模组
        var module = echarts.init(document.getElementById('module'));
        var optionModule = {
            xAxis: {
                type: 'category',
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: dataY,
                type: 'line',
                smooth: true
            }]
        };
        module.setOption(optionModule);
    });
</script>